<template>
  <van-popup
    v-model:show="show"
    position="right"
    :style="{ width: '100%', height: '100%' }"
    :overlay="false"
  >
    <div class="comment-wrapper">
      <!-- 头部导航 -->
      <van-nav-bar :title="title" left-arrow @click-left="showComments" />

      <!-- 评论列表 -->
      <CommentList :commentType="1"/>
      <CommentList :commentType="2"/>
    </div>
  </van-popup>
</template>

<script>
import { inject, reactive, ref, toRefs, watchEffect } from 'vue'
import CommentList from '@/components/CommentList.vue'
export default {
  name: 'DeatilComment',
  components: { CommentList },
  props: { comments: Number },
  setup(props) {
    const state = reactive({
      title: ''
    })
    let show = inject('show') // 控制显示评论面板
    let showComments = inject('showComments')
    
    // console.log(title)
    watchEffect(() => {
      state.title = props.comments+'条评论'
    })
    return {
      ...toRefs(state),
      show,
      showComments,
    }
  },
}
</script>

<style lang='less' scoped>
.comment-wrapper {
  width: 100vw;
  min-height: 100vh;
  // background-color: red;
}
</style>